<template>
    <div>
        <el-card class="!border-none" shadow="never" id="headerH">
            <el-form class="mb-[-16px]" :model="formData" inline>
                <el-form-item label="单据信息">
                    <el-input v-model="formData.order_no" class="w-40" size="small" clearable placeholder="请输入单据信息" />
                </el-form-item>
                <el-form-item label="项目名称">
                    <el-select class="w-40" v-model="formData.type" size="small" clearable>
                        <el-option v-for="(item, index) in options11" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="请款单位">
                    <el-select class="w-40" v-model="formData.type" size="small" clearable>
                        <el-option v-for="(item, index) in options11" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="付款节点">
                    <el-date-picker class="w-40" v-model="date" type="daterange" format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD" range-separator="至" start-placeholder="起始时间" end-placeholder="结束时间"
                        size="small" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small">查询</el-button>
                    <el-button size="small">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="mt-2 !border-none" shadow="never">
            <el-dropdown trigger="click" style="margin-right: 10px">
                <el-button type="primary" size="small">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    新增
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="item in flowList" :key="item.id" @click="handleAdd(item.id)">
                            {{ item.title }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <!-- <el-button size="small" type="primary">
                <template #icon>
                    <icon name="el-icon-Plus" />
                </template>
                导出
            </el-button> -->

            <div style="margin-top: 3px">
                <mtable selection :data="pager.lists" :type="typeTable" :list="options.tableTile" :bill="true"
                    :operation="true" :tableheight="tableheight">
                    <template #tool="{ item }">
                        <el-table-column sortable v-if="item.display == 1" :label="item.name" show-overflow-tooltip
                            :prop="item.value" :width="item.width">
                            <template #default="{ row }">
                                <!-- 业务类型 -->
                                <div v-if="item.name == '业务类型'">
                                    {{ showName(flowList, row.flow_id) }}
                                </div>
                                <div v-if="item.name == '审核状态'">
                                    <el-button v-if="row.order_status == '1'" size="small" color="#E7A23D" plain>
                                        待审核
                                    </el-button>
                                    <el-button v-else-if="row.order_status == '2'" size="small" color="#68C33D" plain>
                                        已审核
                                    </el-button>
                                    <!-- 空字符串处理 -->
                                    <el-button v-else-if="row.order_status == '10'" size="small" color="#c8cacc" plain>
                                        已作废
                                    </el-button>
                                </div>

                                <div v-else-if="item.name == '付款状态'">
                                    <el-button v-if="row.payment_status == '1'" size="small" color="#67C23A" plain>
                                        已付款
                                    </el-button>
                                    <el-button v-else-if="row.payment_status == '2'" size="small" color="#ff557f" plain>
                                        待付款
                                    </el-button>
                                    <el-button v-else-if="row.payment_status == '3'" size="small" color="#66BAEE" plain>
                                        部分支付
                                    </el-button>
                                </div>
                                <div v-if="item.name == '应付款比例'">
                                    <span>{{ row.payment_ratio }}%</span>
                                </div>

                            </template>
                        </el-table-column>
                    </template>
                    <template #operation="{ row, val }">
                        <el-button type="primary" link @click="handleView(val)">
                  
                             <span v-if="val.is_notice" class="chankan">查看
                                <div class="chankan-deg"></div>
                            </span>
                            <span v-else>查看</span>
                        </el-button>
                    </template>
                </mtable>
            </div>
            <div class="flex justify-end">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <el-card class="!border-none mt-2" shadow="never">
            <div class="flex">
                <h1>合计</h1>
                <div class="flex-1" style="text-align: right">
                    <span class="mr-10">总产值: {{ pager.extend.quantity }} (元)</span>
                    <span class="mr-10">总应付金额: {{ pager.extend.total_price }} (元)</span>
                    <span class="mr-10">总奖罚金额: {{ pager.extend.total_price }} (元)</span>
                    <span class="mr-10">总预支款金额: {{ pager.extend.total_price }} (元)</span>
                    <span class="mr-10">总累计实付金额:
                        {{ pager.extend.total_price }} (元)</span>
                    <span class="mr-10">总未付金额: {{ pager.extend.total_price }} (元)</span>
                    <span class="mr-10">总人工费: {{ pager.extend.total_price }} (元)</span>
                    <span class="mr-10">总材料费: {{ pager.extend.total_price }} (元)</span>
                </div>
            </div>
        </el-card>
    </div>
    <edit-popup ref="editRef" @refresh="getLists"/>
    <!-- 新增请款单 -->
    <add-payment-request ref="addPaymentRequestRef" @refresh="getLists" />
</template>

<script lang="ts" setup>
import EditPopup from "./edit.vue";
import AddPaymentRequest from "./add-payment-request.vue";
import mtable from "@/components/table/index.vue";
import { getFinancialLists, adminAll } from "@/api/financial/lists";
import { usePaging } from "@/hooks/usePaging";
import { getCommonFieldDisplay } from "@/api/tools/code";
import { getList } from "@/api/financial/system";
// 导入方法
import { showName } from "@/utils/util";
const formData = reactive({
    order_no: "",
    type: "",
});
const typeTable = ref("payment_request");
const options = reactive({
    listColumn: [] as any[],
    listtype: [
        { title: "入库单", id: 10 },
        { title: "调拨单", id: 20 },
    ],
    tableTile: [] as any[],
    useJurisdiction: "",
    useJurisdictionr: "",
});
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: getFinancialLists,
    params: formData,
});
const tableheight = ref<number | null>(null);
const heighting = () => {
    const divH = document.getElementById("headerH")?.clientHeight || 0;
    const htmlHeight = document.documentElement.clientHeight + "";
    if (divH == 56) {
        tableheight.value = parseInt(htmlHeight) - 205;
    } else {
        tableheight.value = parseInt(htmlHeight) - 180;
    }
};
const getOptions = async () => {
    const res = await getCommonFieldDisplay({ type: typeTable.value });
    options.tableTile = res;
    const res1 = await adminAll({});
};
onMounted(async () => {
    fetchFlowList();
    heighting();
    await getOptions();
    await getLists();
});
// 流程列表
interface List {
    id: string;
    title: string;
}
const flowList = ref<List[]>([]);
const fetchFlowList = async () => {
    const data = await getList({ page_no: 1, page_size: 100 });
    flowList.value = data.lists;
};
const date = ref("");
const options11 = [{ value: "Option1", label: "Option1" }];
// 查看
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const handleView = async (val: any) => {
    editRef.value?.open(val.id);
};
// 新增请款单
const addPaymentRequestRef = ref();
const handleAdd = async (flow_id: string) => {
    addPaymentRequestRef.value?.open(flow_id);
};
</script>

<style scoped>
.chankan {
    position: relative;
}

.chankan-deg {
    position: absolute;
    top: -4px;
    right: -6px;
    width: 7px;
    height: 7px;
    background-color: red;
    border-radius: 100%;
}
</style>
